const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
module.exports = (env)=>{
    console.log(env);
    return{
        // 指定我们打包的入口文件
        entry: {
            index:'./src/index.js',
            another:'./src/another-module.js'
        },
    
        // 输出的目录
        output: {
            // 输出的文件目录
            filename: 'scripts/[name].[contenthash].js',
            // 输出的路径
            path: path.resolve(__dirname, './dist'),
            // 每一次打包都将上一次的删除，添加上一个可选参数
            clean: true,
            // 通过资源模块打包的文件存放在哪个文件的那个目录下,ext代表使用他们原来的后缀名
            assetModuleFilename: 'images/[contenthash][ext]',
            publicPath:'http://localhost:8080/'
        },
        // 开发模式
        mode: env.production ? 'production':'development',
    
        // 开发工具
        devtool: 'inline-source-map',
    
        // 观察模式
        // watch:true,
    
        plugins: [
            new HtmlWebpackPlugin({
                // 将哪个文件进行打包
                template: './index.html',
                // 输出的文件名称叫什么名字
                filename: 'app.html',
                // 将script标签注入哪里
                inject: 'body'
            }),
            // 将打包好的css文件存放到指定的路径和包下
            new MiniCssExtractPlugin({
                filename: 'styles/[contenthash].css'
            }),
        ],
        devServer: {
            // 当前我在该项目中下载了插件webpack-dev-server 他可以自己起一个服务器，我只是将dist目录作为了静态文件挂载在上面
            // 将当前的dist目录作为根目录
            static: './dist',
            // open: true,
            // host: '127.0.0.1',
            // port: 80
        },
        module: {
            rules: [
                {
                    test: /\.png$/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'images/[contenthash][ext]'
                    }
                },
                {
                    test: /\.svg$/,
                    type: 'asset/inline'
                },
                {
                    test: /\.txt$/,
                    type: 'asset/source'
                },
                {
                    test: /\.jpg$/,
                    type: 'asset',
                    parser: {
                        dataUrlCondition: {
                            // 大于4M就是资源文件
                            maxSize: 4 * 1024 * 1024
                        }
                    }
                },
                {
                    test: /\.(css|less)$/,
                    // MIniCssExtractPlugin用于将css代码打包后通过link的方式注入页面
                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    type: 'asset/resource'
                },
                // {
                //     test:/\.toml$/,
                //     type:'json',
                //     parser:{
                //         parse:toml.parse
                //     }
                // }
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                }
            ]
        },
        optimization: {
            minimizer: [
                // 用来打包优化css代码的插件
                new CssMinimizerPlugin(),
                // 对js代码进行压缩的插件
                new TerserPlugin()
            ],
            splitChunks:{
                // 缓存组，将特定的包缓存到浏览器中
                cacheGroups:{
                    vendor:{
                        test:/[\\/]node_modules[\\/]/,
                        name:'vendors',
                        chunks:'all'
                    }
                }
            }
        }
    }
}


// 当我们的常量是大写字母开始的时候，证明他可能是一个对象或则是一个函数，我们需要实例化一下